<template>
    <div v-loading="loading">
        <el-card>
            <template #header>个人信息</template>
            <el-button type="text" @click="disabled = false">编辑</el-button>

            <el-form :model="form" :rules="rules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="avatar">
                    <el-image v-show="disabled" style="width: 100px; height: 100px" :src="url">
                    </el-image>
                    <el-upload v-show="!disabled" :http-request="uploadImg" action="#" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="电话" prop="Parametrs">
                    <el-input v-model="form.phone" :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <!-- <el-input v-model="form.ctime" :disabled="true"></el-input> -->
                    <template #default="{ row }">
                        {{ dayjs(form.ctime).format("YYYY年MM月DD日 HH:mm:ss") }}
                    </template>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio :disabled="disabled" v-model="form.gender" label="1">男</el-radio>
                    <el-radio :disabled="disabled" v-model="form.gender" label="2">女</el-radio>
                </el-form-item>
            </el-form>

            <el-button type="primary" v-show="!disabled" @click="loginUserPut">保存</el-button>
            <el-button type="primary" v-show="!disabled" @click="disabled = true">取消</el-button>
        </el-card>
    </div>
</template>
  
<script>
import { UserImg } from "@/api/users";
import { loginUser, loginUserPut, exist } from "@/api/users";
import dayjs from "dayjs";
export default {
    data() {
        return {
            loading: false,
            url: "",
            imageUrl: "",
            disabled: true,
            form: {},
            user: {},
            rules: {
                username: [
                    { required: true, message: "用户名不能为空" },
                    {
                        validator: (rule, value, cb) => {
                            if (/^.{2,18}$/.test(value)) {
                                cb();
                            } else {
                                cb(new Error("用户名必须2-18个字符"));
                            }
                        },
                    },
                    {
                        validator: async (rule, value, cb) => {
                            if (value === this.user.username) return;
                            const { data } = await exist({
                                field: "username",
                                value,
                            });
                            if (data) {
                                cb(new Error("用户名重复"));
                            } else {
                                cb();
                            }
                        },
                        trigger: "blur",
                    },
                ],
                email: [
                    {
                        validator: (rule, value, cb) => {
                            if (
                                /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
                                    value
                                )
                            ) {
                                cb();
                            } else {
                                cb(new Error("请输入正确的邮箱格式"));
                            }
                        },
                    },
                    {
                        validator: async (rule, value, cb) => {
                            if (value === this.user.email) return;
                            const { data } = await exist({
                                field: "email",
                                value,
                            });
                            if (data) {
                                cb(new Error("邮箱重复"));
                            } else {
                                cb();
                            }
                        },
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        validator: (rule, value, cb) => {
                            if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
                                cb();
                            } else {
                                cb(new Error("手机号格式不正确"));
                            }
                        },
                    },
                    {
                        validator: async (rule, value, cb) => {
                            if (value === this.user.phone) return;
                            const { data } = await exist({
                                field: "phone",
                                value,
                            });
                            if (data) {
                                cb(new Error("手机号重复"));
                            } else {
                                cb();
                            }
                        },
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    async created() {
        await this.loginUser();
    },
    methods: {
        dayjs(date) {
            return dayjs(date)
        },
        async loginUserPut() {
            this.loading = true;
            try {
                await loginUserPut({
                    username: this.form.username,
                    email: this.form.email,
                    phone: this.form.phone,
                    gender: this.form.gender,
                });
                this.$message.success("编辑成功");
                await this.loginUser();
                this.disabled = true;
            } catch (error) { }
            this.loading = false;
        },
        async loginUser() {
            this.loading = true;
            try {
                const { data } = await loginUser();
                this.user = { ...data };
                this.form = data;
                this.form.ctime =
                    this.form.ctime.slice(0, 10) + " " + this.form.ctime.slice(11, 16);
                this.url ='http://192.168.1.31:8080' +this.form.avatar.slice(21);
            } catch (error) { }
            this.loading = false;
        },
        async uploadImg(data) {
            this.loading = true;
            try {
                const qwe = new FormData();
                qwe.append("file", data.file);
                await UserImg(qwe);
            } catch (error) { }
            this.loading = false;
        },

        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>

  